<template>
  <router-link v-bind:to="'/detail?id=' + course.id">
    <el-card class="course-card" @click="onClickCard">

      <el-image class="course-card-image" :src="course.image" fit="fill"></el-image>
      <div class="course-info-wrapper">
        <div class="course-info-name">{{course.name}}</div>
        <div class="course-info-level-enroll">{{COURSE_LEVEL | optionKV(course.level)}} · {{course.enroll}}人报名</div>
        <div class="course-info-price">￥{{course.price}}.00</div>
      </div>

    </el-card>
  </router-link>
</template>

<script>
  export default {
    name: "the-course-card",
    props: {
      course: {}
    },
    data() {
      return {
        COURSE_LEVEL: COURSE_LEVEL
      }
    },
    methods: {
      onClickCard() {
        console.log('11111')
      }
    }
  }
</script>

<style lang="less">
  .router-link-active {
    text-decoration: none!important;
  }

  a {
    text-decoration: none!important;
  }

  .course-card {
    width: 275px;
    height: 273px;
    margin: 10px;
    padding: 0;
    font: 16px/1.5 "PingFang SC", "微软雅黑", "Microsoft YaHei", Helvetica, "Helvetica Neue", Tahoma, Arial, sans-serif;
    transition: all 0.25s ease-in-out;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 3px 5px rgba(0, 0, 0, .20);
    }

    .el-card__body {
      padding: 0;
    }

    .el-card, .el-message {
      border-radius: 50%;
    }

    .course-card-image {
      height: 153px;
      width: 100%;
      margin: 0;
    }

    .course-info-wrapper {
      padding: 5px 5px;

      .course-info-name {
        font-size: 16px;
        color: #545C63;
        line-height: 20px;
        height: 40px;
        margin-bottom: 8px;
        padding: 0 8px;
      }

      .course-info-level-enroll {
        display: block;
        color: #9199A1;
        font-size: 13px;
        margin-bottom: 8px;
        padding: 0 8px;
      }

      .course-info-price {
        font-weight: 700!important;
        color: #F01414;
        margin-left: 7px;
        font-size: 13px;
      }
    }
  }
</style>